<template>
  <div class="index">
    <head-text titleText="基础配置"></head-text>
    <div class="list-content ">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="活动管理及特许支付设定" name="first">
          <div class="text-setting">
            <div class="mb-10">
              <el-button @click="addActivity" plain type="success" size="mini"
                >添加活动</el-button
              >
            </div>
            <div class="table-title">
              <span></span>
              <h5>活动及支付特许设定列表</h5>
            </div>
            <custom-table
              :tableData="tableDataActivity"
              :tableListData="tableListData"
              :tableBtn="tableBtn"
              :currentData="currentData"
              @onPageChange="onPageChangeActivity"
              @onSizeChange="onSizeChangeActivity"
              @editActivity="editActivity"
            ></custom-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="餐饮支付设定" name="second">
          <el-form
            :model="floorForm"
            ref="statementForm"
            label-width="140px"
            class="demo-ruleForm"
          >
            <el-form-item prop="paramValue" label="餐饮支付设定：">
              <el-table
                :data="tableData"
                border
                size="mini"
                style="width:600px;"
              >
                <el-table-column label="楼层" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.venueFloor | floorFilter }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="mchId" label="银盒子ID" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-input
                        v-model="scope.row.mchId"
                        placeholder="请输入银盒子ID"
                        @input="
                          scope.row.mchId = scope.row.mchId.replace(
                            /[^\d]/g,
                            ''
                          )
                        "
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="floorSub()"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="免责声明设定" name="third">
          <el-form
            :model="statementForm"
            status-icon
            ref="statementForm"
            label-width="100px"
            class="demo-ruleForm"
            :rules="rules3"
          >
            <el-form-item prop="paramValue" label="免责声明：">
              <!-- <el-input
                type="textarea"
                :autosize="{ minRows: 20 }"
                v-model="statementForm.paramValue"
                style="width:600px;"
                placeholder="请输入内容"
              ></el-input> -->
              <div style="width:80%;">
                <editor-art :ediData="statementForm"> </editor-art>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="statementSub()" size="mini"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <dialog-activity
      :dialogObj="dialogActivity"
      @reflash="getActivityList"
    ></dialog-activity>
  </div>
</template>

<script>
import customTable from "@c/table";
import dialogActivity from "./dialogActivity";
import { FLOOROBJ } from "@u/wordbook";
import editorArt from "@c/tinymce-editor";
import { validateTemplate } from "./validate";
import {
  getSysParamlApi,
  addSysParamlApi,
  updateSysParamlApi,
  paySettingListApi,
  updatePaySettingApi,
  delPaySettingApi
} from "@s/api";
import headText from "@c/headText";
export default {
  name: "index",
  data() {
    return {
      currentData: {},
      activeName: "first",
      tableData: [
        {
          mchId: "",
          venueFloor: "1",
          id: "",
          payType: 1
        },
        {
          mchId: "",
          venueFloor: "2",
          id: "",
          payType: 1
        },
        // {
        //   mchId: "",
        //   venueFloor: "3",
        //   id: "",
        //   payType: 1
        // },                             // 取消三楼四楼
        // {
        //   mchId: "",
        //   venueFloor: "4",
        //   id: "",
        //   payType: 1
        // },
        {
          mchId: "",
          venueFloor: "5",
          id: "",
          payType: 1
        }
      ],
      nowPageActivity: 1,
      limitActivity: 10,
      tableDataActivity: [],
      dialogActivity: {
        id: "",
        title: "",
        show: false,
        form: {}
      },
      floorForm: {},
      statementForm: {
        id: "",
        paramValue: ""
      },
      rules3: {
        paramValue: [
          { required: true, trigger: "blur", message: "请输入内容" },
          { validator: validateTemplate }
        ]
      }
    };
  },
  components: {
    headText,
    dialogActivity,
    editorArt,
    customTable
  },
  created() {
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "activityName", width: "", label: "活动名称" },
      { prop: "mchId", width: "", label: "银盒子ID" },
      { prop: "createTime", width: "150", label: "创建时间" },
      { label: "操作", type: "btn", width: "180", fixed: "right" }
    ];
    // 按钮
    this.tableBtn = [
      {
        name: "编辑",
        btnType: "primary",
        handleFn: "editActivity"
      }
      //  {
      //   name: "删除",
      //   btnType: "danger",
      //   handleFn: "delActivity"
      // }
    ];
  },
  //过滤器
  filters: {
    floorFilter(val) {
      return FLOOROBJ[val];
    }
  },
  mounted() {
    this.getList();
    this.getActivityList();
    this.getSysList();
  },
  methods: {
    getList() {
      let json = {
        limit: 99,
        page: 1,
        payType: 1 // 1楼层
      };
      paySettingListApi(json).then(res => {
        if (res.list.length > 0) {
          this.tableData = res.list;
        }
      });
    },
    getSysList() {
      let json = {
        paramCode: "DISCLAIMER_KEY"
      };
      getSysParamlApi(json).then(res => {
        res.forEach(item => {
          if (item.paramCode == "DISCLAIMER_KEY") {
            this.statementForm = item;
          }
        });
      });
    },
    handleClick() {},
    onPageChangeActivity(val) {
      this.nowPageActivity = val;
      this.getActivityList();
    },
    onSizeChangeActivity(val) {
      this.nowPageActivity = 1;
      this.limitActivity = val;
      this.getActivityList();
    },
    getActivityList() {
      let json = {
        limit: this.limitActivity,
        page: this.nowPageActivity,
        payType: 2 // 2活动
      };
      paySettingListApi(json).then(res => {
        this.tableDataActivity = res.list;
        this.currentData.total = res.total;
      });
    },
    editActivity(val) {
      this.dialogActivity.id = val.id;
      this.dialogActivity.show = true;
      this.dialogActivity.form = val;
      this.dialogActivity.title = "编辑活动";
    },
    delActivity(val) {
      this.$confirm("此操作将删除该信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [val.id];
        delPaySettingApi(json).then(() => {
          this.getActivityList();
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    },
    addActivity() {
      this.dialogActivity.id = "";
      this.dialogActivity.show = true;
      this.dialogActivity.title = "添加活动";
    },
    statementSub() {
      this.$refs["statementForm"].validate(valid => {
        if (valid) {
          this.$confirm("此操作将修改该免责声明?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.statementForm.id) {
              this.updateStatementSub();
            } else {
              this.addStatementSub();
            }
          });
        }
      });
    },
    addStatementSub() {
      let json = {
        paramType: 1, //  系统配置参数
        paramCode: "DISCLAIMER_KEY", // 免责声明
        paramValue: this.statementForm.paramValue // 免责声明内容
      };
      addSysParamlApi(json).then(() => {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    updateStatementSub() {
      let json = {
        id: this.statementForm.id,
        paramType: 1, //  系统配置参数
        paramCode: "DISCLAIMER_KEY", // 免责声明
        paramValue: this.statementForm.paramValue // 免责声明内容
      };
      updateSysParamlApi(json).then(() => {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    floorSub() {
      this.$confirm("此操作将修改支付信息设定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.updateFloorSub();
      });
    },
    updateFloorSub() {
      let json = this.tableData;
      updatePaySettingApi(json).then(() => {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    }
  }
};
</script>
<style scoped lang="scss"></style>
